<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="images work in 360 dimensions with several options" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" type="image/png" href="https://cdn.jolipage.co/5c1376c5-e4cd-4250-b760-4c810d7f5fdd/fdf058fa-5faf-4c83-bffa-4faa42b6d252/dc8ef1f26116405e2b275c5020ad8ce1ac071f86bf2134f143c23e692e396f76.png?vh=3632c0">
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Rubik:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <title>JS-Cloudimage-360-view</title>
  </head>

  <body>
    <section class="content-wrapper">
      <header class="header">
        <div class="header-logo">
          <a href="https://www.scaleflex.com/en/home" target="_blank">
            <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex logo" />
          </a>
          <a
          class="cloud-img-title"
          href="https://github.com/Scaleflex/js-cloudimage-360-view"
          target="_blank"
          >
            JS Cloudimage 360 view
          </a>
        </div>
        <div class="navbar">
          <a
            class="stars-button"
            href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
            target="_blank"
          >
            <img class="github-icons" src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/star-icon.svg" alt="star" />
            <img
              src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?color=%23F1F8FF&logo=none&style=social"
              alt="star-img"
            />
          </a>
          <a
            class="git-button"
            href="https://github.com/Scaleflex/js-cloudimage-360-view"
            target="_blank"
          >
            <img
              class="github-icons"
              src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/github-icon.svg"
              alt="github-icon"
            />
            GitHub
          </a>
        </div>
      </header>

      <div class="content">
        <h1>Display <span>every detail</span> from any angle, on any device</h1>
        <h2 class="content-text">
          Enhance your customer's experience with stunning 360° views of your products. 
          Create an immersive product experience, every time.
        </h2>
        <div class="github-sandbox-buttons-wrapper">
            <a
              class="github-button transition-filled-button"
              href="https://github.com/Scaleflex/js-cloudimage-360-view"
              target="_blank"
            >
              View on GitHub
            </a>
            <a
            class="code-sand-box-button"
            href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"
            target="_blank"
            >
              Edit to CodeSandbox
            </a>
        </div>
        <div class="car-image container-fluid">
          <div
            class="cloudimage-360"
            id="gurkha-suv"
            data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
            data-filename-x="orange-{index}.jpg"
            data-amount-x="73"
            data-lazyload
            data-autoplay
            data-play-once
            data-hide-360-logo
            data-speed="120"
            data-lazy-selector="lazyload"
            data-hotspots
            data-responsive="scaleflex"
          ></div>
          <p class="content-text">
            Featuring 36 images, autoplay*, bottom 360° view circle, arrow keys support*,
            magnifier*, inner box shadow and more!<br/>
            (*) available only on desktops
          </p>
          <div class="cyan-blur-circle hide-in-mobile"></div>
          <div class="blue-blur-circle hide-in-mobile"></div>
        </div>
        <div class="customer-logos container-fluid">
          <img class="vivo-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vivo.png?vh=f930bb" alt="vivo logo" />
          <img class="jawa-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vector+%281%29.png?vh=b9e7a3" alt="jawa logo" />
          <img
            class="sennheiser-logo"
            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Sennheiser.png?vh=d6e9e7"
            alt="Sennheiser logo"
          />
          <img
            class="geelly-logo"
            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Geelly.png?vh=1bd4d0"
            alt="Geelly logo"
          />
          <img
            class="yamaha-logo"
            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Yamaha.png?vh=be161d"
            alt="yamaha logo"
          />
          <div class="force-logo-wrapper">
            <img
              class="force-logo"
              src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Force.png?vh=afc507"
              alt="force logo"
            />
          </div>
        </div>
      </div>
    </section>

    <section class="gallery-section container-fluid">
      <div class="gallery-title">
        <h2>Trusted by top brands, worldwide</h2>
        <p>Explore the brands that use our plugins.</p>
      </div>
      <div class="gallery-content container-fluid">
        <div class="motorcycle">
          <div
            class="cloudimage-360"
            data-folder="https://scaleflex.cloudimg.io/v7/demo/jawa-motorcycle/"
            data-filename-x="{index}.jpg"
            data-amount-x="16"
            data-lazyload
            data-lazy-selector="lazyload"
            data-responsive="scaleflex"
          ></div>
          <p>Toyota</p>
        </div>
        <div class="vivo-mobile">
          <div
            class="cloudimage-360"
            data-folder="https://scaleflex.cloudimg.io/v7/demo/vivo-mobile/"
            data-filename-x="product-{index}.jpg"
            data-amount-x="60"
            data-drag-speed="100"
            data-lazyload
            data-lazy-selector="lazyload"
            data-responsive="scaleflex"
          ></div>
          <p>Vivo</p>
        </div>
        <div class="geely-car">
          <div
            class="cloudimage-360"
            data-folder="https://scaleflex.cloudimg.io/v7/demo/geely-car/"
            data-filename-x="Okavango-3-{index}.jpg"
            data-amount-x="24"
            data-bottom-circle
            data-lazyload
            data-lazy-selector="lazyload"
            data-responsive="scaleflex"
          ></div>
          <p>Geely</p>
        </div>
      </div>
    </section>

    <section class="demo-usage">
      <div class="usage-title">
        <h2>Create 360° views, your way</h2>
        <p>
          Try out our simple, interactive resource to customize an interactive virtual tour of your product.
        </p>
      </div>

      <div class="demo-usage-wrapper container-fluid">
        <div class="demo-usage-content">
          <div class="earbuds">
            <div
              id="demo-generator"
              class="cloudimage-360"
              data-folder="https://scaleflex.cloudimg.io/v7/demo/earbuds/"
              data-filename-x="{index}.jpg"
              data-amount-x="233"
              data-autoplay
              data-speed="100"
              data-drag-speed="100"
              data-responsive="scaleflex"
              data-lazyload
              data-lazy-selector="lazyload"
            >
              <button class="cloudimage-360-left control-buttons"></button>
              <button class="cloudimage-360-right control-buttons"></button>
              <button
                id="control-up-button"
                class="cloudimage-360-top control-buttons"
              ></button>
              <button
                id="control-down-button"
                class="cloudimage-360-bottom control-buttons"
              ></button>
            </div>
            <div class="copy-button-wrapper">
              <div class="copy-button">
                <img src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/copy-icon.svg" alt="copy icon">
                <p id="copy-text">Copy</p>
              </div>
            </div>
            <div class="output-code-wrapper" id="code-wrapper">
              <div class="output-code">
                &lt;div
                <div class="code" id="code-block"></div>
                >&lt;/div&gt;
              </div>
            </div>
          </div>
        <div class="plugin-options-wrapper">
          <div class="image-source">
            <div class="image-source-options">
              <h3>Images source</h3>
              <select
                class="plugin-options plugin-selector"
                id="spin-directions"
              >
                <option value="X">spin x demo</option>
                <option value="Y">spin y demo</option>
              </select>
            </div>
            <div class="image-name-option">
              <p class="input-title">Images name x</p>
              <input
                class="plugin-options"
                type="text"
                placeholder="airbuds_{index}.jpg"
                disabled
              />
            </div>
            <div class="x-amount-option">
              <p class="input-title">Select amount-x</p>
              <select
                class="plugin-options plugin-selector"
                data-plugin-value="data-amount-x"
                plugin-input
                id="x-images-selector"
              >
                <option value="233">233</option>
                <option value="72">72</option>
                <option value="36">36</option>
              </select>
              <select
                class="plugin-options plugin-selector"
                data-plugin-value="data-amount-x"
                plugin-input
                id="nike-x-images"
              >
                <option value="35">35 images</option>
                <option value="25">25 images</option>
                <option value="15">15 images</option>
              </select>
            </div>
            <div id="images-y" class="y-amount-option">
              <p class="input-title">Select amount-y</p>
              <select
                class="plugin-options plugin-selector"
                data-plugin-value="data-amount-y"
                plugin-input
              >
                <option value="36">36 images</option>
              </select>
            </div>
          </div>
          <div class="customize">
            <h3>Customize</h3>
            <div class="customize-wrapper">
              <div class="customize-options">
                <div class="pointer-checkbox">
                  <label class="checkbox-container">
                    Pointer zoom
                    <input
                      class="customize-inputs"
                      data-plugin-value="data-pointer-zoom"
                      data-checkbox="pointer-checkbox"
                      type="checkbox"
                      id="pointer-checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="customize-selectors-wrappers">
                  <p class="selectors-wrappers-text">zoom scale</p>
                  <select
                    class="customize-selectors plugin-selector"
                    data-input="pointer-checkbox"
                    data-plugin-value="data-pointer-zoom"
                    id="pointer-selector"
                    plugin-input
                    disabled
                  >
                    <option value="1.5">1.5</option>
                    <option value="2">2</option>
                    <option value="2.5">2.5</option>
                    <option value="3.5">3.5</option>
                    <option value="4">4</option>
                  </select>
                </div>
              </div>
              <div class="customize-selectors-wrappers">
                <p class="selectors-wrappers-text">Auto play behavior</p>
                <select
                  class="customize-selectors plugin-selector"
                  id="auto-play-behavior"
                  data-plugin-value="data-autoplay-behavior"
                  plugin-input
                  disabled
                >
                  <option value="spin-xy">spin-xy</option>
                  <option value="spin-x">spin-x</option>
                  <option value="spin-y">spin-y</option>
                  <option value="spin-yx">spin-yx</option>
                </select>
              </div>
              <div class="customize-selectors-wrappers">
                <p class="selectors-wrappers-text">Auto play speed(milliseconds)</p>
                <input
                  id="spin-speed"
                  class="customize-selectors"
                  data-plugin-value="data-speed"
                  plugin-input
                  type="number"
                  value="100"
                  placeholder="e.g. 100"
                />
              </div>
              <div class="customize-selectors-wrappers">
                <p class="selectors-wrappers-text">Drag speed(milliseconds)</p>
                <input
                  id="drag-speed"
                  class="customize-selectors"
                  data-plugin-value="data-drag-speed"
                  plugin-input
                  type="number"
                  value="120"
                  placeholder="e.g. 120"
                />
              </div>
              <div class="checkbox-group">
                <div>
                  <label class="checkbox-container">
                    Magnifier
                    <input
                      id="image-magnifier"
                      class="customize-inputs plugin-option"
                      data-plugin-value="data-magnifier"
                      value="2"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Auto play
                    <input
                      data-plugin-value="data-autoplay"
                      class="plugin-option"
                      type="checkbox"
                      checked
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Auto play once
                    <input
                      data-plugin-value="data-play-once"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Auto play reverse
                    <input
                      data-plugin-value="data-autoplay-reverse"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Fullscreen
                    <input
                      data-plugin-value="data-fullscreen"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Disable drag
                    <input
                      data-plugin-value="disable-drag"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Drag reverse
                    <input
                      data-plugin-value="data-spin-reverse"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Hide 360 logo
                    <input
                      data-plugin-value="hide-360-logo"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Control
                    <input
                      id="control-option"
                      class="plugin-option"
                      type="checkbox"
                      data-plugin-value="data-control"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Control reverse
                    <input
                      data-plugin-value="control-reverse"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Control by keyboard
                    <input
                      data-plugin-value="data-keys"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Control by keyboard reverse
                    <input
                      data-plugin-value="data-control-reverse"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Stop at edges
                    <input
                      data-plugin-value="stop-at-edges"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div>
                  <label class="checkbox-container">
                    Bottom circle
                    <input
                      data-plugin-value="data-bottom-circle"
                      class="plugin-option"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
              <div class="customize-options">
                <div class="box-shadow-checkbox">
                  <label class="checkbox-container">
                    Box shadow
                    <input
                      class="customize-inputs"
                      id="box-shadow"
                      data-plugin-value="box-shadow"
                      data-checkbox="box-shadow"
                      type="checkbox"
                    />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="customize-selectors-wrappers">
                  <p class="selectors-wrappers-text">Box Shadow</p>
                  <input
                    class="customize-selectors"
                    disabled
                    data-input="box-shadow"
                    data-plugin-value="box-shadow"
                    box-shadow-option
                    plugin-input
                    value="inset 0 0 100px #222"
                    type="text"
                  />
                </div>
              </div>
              <div class="customize-options">
                <div class="respons-checkbox">
                  <label class="checkbox-container">
                    Responsive
                    <input class="customize-inputs"
                    id="responsive-checkbox"
                    data-plugin-value="data-responsive"
                    type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="customize-selectors-wrappers">
                  <p class="selectors-wrappers-text">Token</p>
                  <input
                    class="customize-selectors"
                    value="scaleflex"
                    responsive-option
                    data-plugin-value="data-responsive"
                    plugin-input
                    disabled
                    type="text"
                  />
                </div>
              </div>
              <div class="customize-selectors-wrappers">
                <p class="selectors-wrappers-text">Transformation</p>
                <input
                  class="customize-selectors plugin-option"
                  data-plugin-value="data-transformation"
                  responsive-option
                  plugin-input
                  value="w=400&h=200&func=fit"
                  type="text"
                  disabled
                />
              </div>
              <div class="customize-selectors-wrappers">
                <p class="selectors-wrappers-text">Filter</p>
                <input
                  class="customize-selectors plugin-option"
                  data-plugin-value="data-filters"
                  responsive-option
                  plugin-input
                  value="bright:15,contrast:30"
                  type="text"
                  disabled
                />
              </div>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>
    </section>

    <section class="questions">
      <h2>Any questions?</h2>
      <p>
        Contact us at <span>hello@cloudimage.io</span>, our experts will be
        happy to help!
      </p>
      <div class="issue-button-wrapper">
        <a
          class="issue-button transition-filled-button"
          href="https://github.com/scaleflex/js-cloudimage-360-view/issues/new"
          target="_blank"
        >
          Submit GitHub issue
        </a>
      </div>
      <div class="cyan-blur-circle hide-in-mobile"></div>
      <div class="green-blur-circle hide-in-mobile"></div>
    </section>

    <section class="footer container-fluid">
      <div class="accordion-wrapper">
        <div>
          <div class="filerobot-accordion">
            <button data-accordion="2">Info</button>
            <img
              data-accordion="2"
              src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
              alt="down-arrow"
            />
          </div>
          <div class="accordion-content" data-accordion-content="2">
            <div class="footer-info-content">
              <a
                href="https://github.com/scaleflex/js-cloudimage-360-view"
                target="_blank"
              >
                View GitHub
              </a>
              <a
                href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
                target="_blank"
              >
                Current Issues
              </a>
              <a
                href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
                target="_blank"
              >
                Documentation
              </a>
            </div>
          </div>
        </div>
        <div>
          <div class="filerobot-accordion">
            <button data-accordion="1">Filerobot</button>
            <img
              data-accordion="1"
              src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
              alt="down-arrow"
            />
          </div>
          <div class="accordion-content" data-accordion-content="1">
            <div class="footer-filerobot-content">
              <a
                href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
                target="_blank"
              >
                Filerobot Media Asset Widget
              </a>
              <a
                href="https://scaleflex.github.io/filerobot-image-editor/"
                target="_blank"
              >
              Filerobot Image Editor
            </a>
              <a
                href="https://scaleflex.github.io/js-cloudimage-responsive/"
                target="_blank"
              >
                Cloudimage Responsive
              </a>
              <a
                href="https://scaleflex.github.io/js-cloudimage-360-view/"
                target="_blank"
              >
                Cloudimage 360 view
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar">
        <a
          class="stars"
          href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
          target="_blank"
        >
          <img class="star" src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/star-icon.svg" alt="star" />
          <img
            class="stars-label"
            src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?logo=none&style=social"
            alt="star-img"
          />
        </a>
        <a
          class="github"
          href="https://github.com/scaleflex/js-cloudimage-360-view"
          target="_blank"
        >
          <img
            src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/github-icon.svg"
            alt="github-icon"
          />
          <p>GitHub</p>
        </a>
      </div>
      <div class="footer-logo">
        <a href="https://www.scaleflex.com/en/home" target="_blank">
          <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex-logo" />
        </a>
        <p>
          Made with ❤ by the
          <span>
            <a href=" https://scaleflex.com/en/home" target="_blank">Scaleflex</a>
          </span>
          team, the guys behind
          <span>
            <a href=" https://cloudimage.io/en/home" target="_blank"
              >Cloudimage.io</a></span>. Powered by
          <span>
            <a href="https://filerobot.com/en/home" target="_blank">Filerobot</a></span>. All rights reserved.
        </p>
        <div class="footer-blur-circle"></div>
      </div>
      <div class="footer-wrapper">
        <div class="footer-info">
          <h4>Info</h4>
          <div class="footer-info-content">
            <a
              href="https://github.com/scaleflex/js-cloudimage-360-view"
              target="_blank"
            >
              View GitHub
            </a>
            <a
              href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
              target="_blank"
            >
              Current Issues
            </a>
            <a
              href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
              target="_blank"
            >
              Documentation
            </a>
          </div>
        </div>
        <div class="footer-filerobot">
          <h4>Filerobot UI Family</h4>
          <div class="footer-filerobot-content">
            <a
              href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
              target="_blank"
            >
              Filerobot Media Asset Widget
            </a>
            <a
              href="https://scaleflex.github.io/filerobot-image-editor/"
              target="_blank"
            >
              Filerobot Image Editor
            </a>
            <a
              href="https://scaleflex.github.io/js-cloudimage-responsive/"
              target="_blank"
            >
              Cloudimage Responsive
            </a>
            <a
              href="https://scaleflex.github.io/js-cloudimage-360-view"
              target="_blank"
            >
              Cloudimage 360 view
            </a>
          </div>
        </div>
      </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
  </body>
</html>
